<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery.js"></script>
    <script src="js/vue-router.js"></script>
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id="app">
        <el-card>
            <el-table :data="equipList" stripe style="width: 100%">
                <el-table-column prop="id" label="设备编号" width="300">
                </el-table-column>
                <el-table-column prop="modelName" label="设备名称" width="100">
                </el-table-column>
                <el-table-column prop="location" label="监测区域" width="100">
                </el-table-column>
                <el-table-column prop="threshold" label="监测阈值" width="100">
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间">
                </el-table-column>
                <el-table-column prop="modelPosition" label="设备坐标">
                </el-table-column>
                <el-table-column prop="modelType" label="设备类型" width="100">
                </el-table-column>
                <el-table-column prop="modelUrl" label="设备路径">
                </el-table-column>
                <el-table-column prop="modelAngle" label="设备角度">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="doUpdate(scope.row.id)">更新</el-button>
                        <el-button type="danger" @click="deleteEquip(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-dialog title="更新设备" :visible.sync="updateModalVisible" width="50%">
            <el-form label-position="left" label-width="80px" :model="updateForm">
                <el-form-item label="设备编号">
                    <el-input v-model="updateForm.id" readonly></el-input>
                </el-form-item>
                <el-form-item label="设备名称">
                    <el-input v-model="updateForm.modelName"></el-input>
                </el-form-item>
                <el-form-item label="监测区域">
                    <el-input v-model="updateForm.location"></el-input>
                </el-form-item>
                <el-form-item label="监测阈值">
                    <el-input v-model="updateForm.threshold"></el-input>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-input v-model="updateForm.createTime" readonly></el-input>
                </el-form-item>
                <el-form-item label="设备坐标">
                    <el-input v-model="updateForm.modelPosition" readonly></el-input>
                </el-form-item>
                <el-form-item label="设备类型">
                    <el-input v-model="updateForm.modelType" readonly></el-input>
                </el-form-item>
                <el-form-item label="设备路径">
                    <el-input v-model="updateForm.modelUrl" readonly></el-input>
                </el-form-item>
                <el-form-item label="设备角度">
                    <el-input v-model="updateForm.modelAngle" readonly></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updateModalVisible = false">取 消</el-button>
                <el-button type="primary" @click="toUpdate">确 定</el-button>
            </span>
        </el-dialog>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    equipList: [],
                    updateForm: {
                        "createTime": "",
                        "id": "",
                        "location": "",
                        "modelAngle": "",
                        "modelName": "",
                        "modelPosition": "",
                        "modelType": "",
                        "modelUrl": "",
                        "threshold": ""
                    },
                    updateModalVisible: false,
                }
            },
            mounted() {
                this.getEquipList();
            },
            methods: {
                getEquipList() {
                    $.ajax({
                        type: 'get',
                        url: 'http://localhost:8080/equipment/selectAll',
                        dataType: 'json',
                        success: function (data) {
                            if (data.code === 200) {
                                vm.equipList = data.data.list;
                            }
                        }
                    })
                },

                doUpdate(id) {
                    vm.updateModalVisible = true
                    $.ajax({
                        type: 'get',
                        url: 'http://localhost:8080/equipment/selectOneById/' + id,
                        dataType: 'json',
                        success: function (data) {
                            if (data.code === 200) {
                                vm.updateForm = data.data.equip;
                            }
                        }
                    })
                },

                toUpdate() {
                    var date = new Date(vm.updateForm.createTime);
                    vm.updateForm.createTime = date;
                    $.ajax({
                        type: 'post',
                        contentType: 'application/json',
                        url: 'http://localhost:8080/equipment/updateOneById',
                        dataType: 'json',
                        data: JSON.stringify(vm.updateForm),
                        success: function (data) {
                            if (data.code === 200) {
                                vm.getEquipList();
                                vm.updateModalVisible = false
                            }
                        }
                    })
                },

                deleteEquip(id) {
                    this.$confirm('此操作将永久删除该设备, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        $.ajax({
                            type: 'put',
                            url: 'http://localhost:8080/equipment/removeOneById/' + id,
                            dataType: 'json',
                            success: function (msg) {
                                if (msg.code === 200) {
                                    vm.getEquipList();
                                }
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });

                }
            }
        })
    </script>
</body>

</html>